<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基于amazeui用户支付页面</title>

    <link rel="stylesheet" type="text/css" href="admin/css/amazeui.min.css" />
    <link rel="stylesheet" type="text/css" href="admin/css/zhifu.css" />
    <script src="admin/js/jquery-3.5.0.js"></script>
    <script type="text/javascript" src="admin/js/jquery.min.js"></script>
    <script type="text/javascript" src="admin/js/jquery.qrcode.min.js"></script>
    <script type="text/javascript" src="admin/js/amazeui.min.js"></script>
    <style>
        #qrcode {
            position: relative;
            top: 10px;
            left: 240px;
        }
        .tr_rechnum {
            position: relative;
            top: 10px;
            left: 265px;
        }
        .aa {
            position: relative;
            top: 10px;
            left: 240px;
        }
    </style>
</head>
<body>
<div class="pay">
    <!--主内容开始编辑-->
    <div class="tr_recharge">
        <div class="tr_rechtext">
            <p class="te_retit"><img src="images/coin.png" alt="" />微信支付</p>
            <p>1.您有5分钟的时间来扫码支付，如果您在5分钟内未支付，将会转到订单页面。</p>
            <p>2.在有效时间内您可以在订单页面继续支付，如果您想退出支付，直接回退页面即可。</p>
        </div >
        <div class="tr_rechbox">
            <div class="tr_rechhead">
                <img  src="images/logo.png" /><span style="font-size: xx-large;">微信支付</span>
            </div>
            <div class="tr_rechcho am-form-group"></div>
            <div id="qrcode"></div>
            <div class="aa"><img src="images/wenzi.png"></div>
            <div class="tr_rechcho am-form-group"></div>
            <div class="tr_rechnum">
                <span class="rechnum" style="color:black;">应付金额：</span>
                <p class="rechnum" style="color:black;" id="payInfo"></p>
            </div>
        </div>
    </div>
</div>
<script>

    var out_trade_no = localStorage.getItem("orderNo");
    var total_fee = localStorage.getItem("totalPrice");

    var payInfo = document.getElementById('payInfo')
    payInfo.innerText = total_fee + '元';

    // 创建二维码
    function createNative(){
        // var payInfo = $('#payInfo');
        $.ajax({
            url:'http://localhost:8080/pay/createNative/'+out_trade_no+'/'+total_fee,
            dataType:'json',
            data:{},
            success: function (_data) {
                code_url = _data.code_url;
                // qrcode 根据code_url加载出二维码
                jQuery('#qrcode').qrcode({
                    render: "canvas", //也可以替换为table
                    width: 260,
                    height: 260,
                    text: code_url
                });
            }
        })
    }
    createNative();

    function queryPayStatus() {
        $.ajax({
            url:'http://localhost:8080/pay/queryPayStatus/'+out_trade_no,
            dataType:'json',
            data:{},
            success: function (_data) {
                console.log(_data)
                var code = _data.code
                if ("1" == code){
                    localStorage.setItem("orderNo","");
                    localStorage.setItem("totalPrice","");
                    window.location.href="showOrder.jsp";
                }else if ("0" == code){
                    // 二维码超时
                    localStorage.setItem("orderNo","");
                    localStorage.setItem("totalPrice","");
                    window.location.href="showOrder.jsp";
                }else if ("-1" == code){
                    // 支付失败
                    localStorage.setItem("orderNo","");
                    localStorage.setItem("totalPrice","");
                    window.location.href="showOrder.jsp";
                }
            }
        })
    }
    queryPayStatus();

</script>
</body>
</html>